<%@ page language="java" pageEncoding="utf-8" %>

<html>

<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/public/mapObj.js"></script>
<head>
    <title>诱导板管理</title>
</head>


<body style="overflow: hidden;">
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>
    道路管理<span class="c-gray en">&gt;</span>
    摄像机列表
</nav>
<div class="container">
    <div id="right" style='float:right;width:80%;height:99%;border-left:2px ridge;overflow: hidden'>

        <div class="righthead">
            <div style="height:9px"></div>
            <div id="showBtn" class="hideLeft"></div>
            <div class="hideLeftT">
                <div id="refresh" class="hideLeftTwo"></div>
                <div id="text" class="refreshtext"><span>刷新</span></div>
            </div>
        </div>
        <div id="mapObj" style="width:99%;height:99%">
        </div>

    </div>
    <div id="left" style='width:20%;height:99%;'>
        <div class="lefthead" style="line-height: 30px;height:32px">
            &nbsp;<span style="font-weight: bold">摄像机列表</span>


        </div>
        <div id="result" class="parkinfos">
            正在加载数据,请稍候.....
        </div>

    </div>
</div>


</body>
</html>
<%@include file="../../head-ui.jsp" %>
<script type="text/javascript">


    var map = new BMap.Map("mapObj");// 创建Map实例
    var listMapInfo = [];
    $(function () {

        //地图
        var poi = new BMap.Point(121.389257, 31.216542);
        map.centerAndZoom(poi, 14);
        map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
        map.setCurrentCity("上海");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

        getlist();

        //刷新
        $('#text').click(function () {
            map.clearOverlays();

            getlist();
        });


        $("#showBtn").click(function () {
            var btn = $("#showBtn");
            var right = $("#right");
            $("#left").toggle();

            if (btn.hasClass("hideLeft")) {
                btn.removeClass("hideLeft").addClass("showLeft");

                right.width($(".container").width());
                right.addClass("fullScreen");
            } else {
                btn.removeClass("showLeft").addClass("hideLeft");
                right.width($(".container").width() * 0.8);
                right.removeClass("fullScreen");
            }


        })

    });
    var arr = [];
    function getlist() {
        $.ajax({
            url: '<%=request.getContextPath()%>/back/boradinfo/list.do',
            type: 'POST',
            success: function (json) {
                var html = "";
                arr = [];
                for (var i = 0; i < json.length; i++) {
                    var obj = json[i];
                    if (i == json.length) {

                        var str = "&nbsp;&nbsp;<li id='" + obj.id + "'style='list-style-type: none; margin-left:3px; margin-top:-17px; cursor: pointer; ' " +
                                "onmouseover=\"onmouseover_Style(" + obj.id + ")\" onmouseout=\"onmouseout_Style(" + obj.id + ")\"" +
                                "onclick=\"boradlinkMap(" + "'" + obj.code + "'," + obj.id + ")\">" + obj.name + "<a onclick=\"checkBorad(" + obj.id + ")\" class='xq'>查看>>" + "</a>" + "</li>";
                    } else {
                        var str = "&nbsp;&nbsp;<li id='" + obj.id + "' style='list-style-type: none;margin-left:3px;margin-top:-17px;" +
                                "border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: rgb(219, 219, 219); cursor: pointer; ' " +
                                "onmouseover=\"onmouseover_Style(" + obj.id + ")\" onmouseout=\"onmouseout_Style(" + obj.id + ")\" " +
                                "onclick=\"boradlinkMap(" + "'" + obj.code + "'," + obj.id + ")\">" + obj.name + "<a onclick=\"checkBorad(" + obj.id + ")\" class='xq'>查看>>" + "</a>" + "</li>";
                    }
                    html += str;
                    addMarker(obj);
                    arr.push(obj);
                }
                $("#result").empty().append(html);
            }

        })
    }

    var addMarker = function (obj) {
        var point = new BMap.Point(parseFloat(obj.lng), parseFloat(obj.lat));
        var myIcon = new BMap.Icon("<%=request.getContextPath()%>/resources/images/park/park.png", new BMap.Size(25, 39), {
            imageSize: new BMap.Size(20, 34)
        });
        var marker = new BMap.Marker(point, {icon: myIcon});  // 创建标注
        marker.mydata = obj;
        map.addOverlay(marker);
        marker.setAnimation(BMAP_ANIMATION_DROP); //跳动的动画
        var p = obj;
        var infoWindow = getContent(obj);
        p.infoWindow = infoWindow;
        p.mapthis = marker;
        listMapInfo.push(p);
        marker.addEventListener("click", getMarkerClick);
    }


    function boradlinkMap(code, x, y) {
        $("#result li").css("background", "");
        $("#" + code).css("background", "#EEEEEE");
        var point = new BMap.Point(parseFloat(x), parseFloat(y));
        map.centerAndZoom(point, 14);
        var win = getInfoWindow(code);
        if (win != null) {
            win.infoWindow.open(win.mapthis);
            //win.mapthis.openInfoWindow(win.infoWindow)
        }

    }
    function getMarkerClick(m) {
        var p = m.target.mydata;
        var win = getContent(p);
        win.open(this);
    }
    function getInfoWindow(code) {
        var result = null;
        for (var i = 0; i < listMapInfo.length; i++) {
            var p = listMapInfo[i];
            if (p.code == code) {
                result = p;
                break;
            }
        }
        return result;
    }

    function getContent(p) {

        var content = "<div><img src='" + p.path + "'style='width:310px;height:210px'></div>";
        var window = new BMapLib.SearchInfoWindow(map, content, {
            title: p.name,   //标题
            width: 310,             //宽度
            height: 210,              //高度
            panel: "panel",         //检索结果面板
            enableAutoPan: true,     //自动平移
            enableSendToPhone: false, //是否启动发送到手机功能
            searchTypes: [
//                BMAPLIB_TAB_SEARCH,   //周边检索
//                BMAPLIB_TAB_TO_HERE,  //到这里去
//                BMAPLIB_TAB_FROM_HERE //从这里出发
            ]
        })
        return window;


    }

    function checkBorad(id) {
        $("#result li").css("background", "");
        $("#" + id).css("background", "#EEEEEE");
        for(var i=0;i<arr.length;i++){
            if(arr[i].id==id){
                var msg =  '请将新打开的页面中端口号6002改为'+arr[i]['dataport']+',用户名和密码都是system';
                var index =  layer.alert(msg, {
                    icon: 1,//2表示保存失败图标，1表示保存成功
                    closeBtn: false,
                    shadeClose: true,
                    title: "提示"
                }, function () {
                    layer.close(index);
                    window.open("http://183.195.121.179:"+parseInt(arr[i]['serverport'])+"/login.html","blank");

                });


                break;
            }
        }


    }


</script>